<template>
	<view class="history-container">
		<!-- 页面标题 -->
		<view class="header">
			<text class="title">历史反馈</text>
		</view>

		<!-- 反馈列表 -->
		<view class="feedback-list" v-if="feedbackList.length > 0">
			<view class="feedback-item" v-for="item in feedbackList" :key="item.id">
				<!-- 反馈头部信息 -->
				<view class="feedback-header">
					<view class="feedback-type">
						<text class="type-text">{{ getFeedbackTypeText(item.feedbackType) }}</text>
					</view>
					<view class="feedback-status" :class="getStatusClass(item.status)">
						<text class="status-text">{{ getStatusText(item.status) }}</text>
					</view>
				</view>

				<!-- 反馈内容 -->
				<view class="feedback-content">
					<text class="description">{{ item.description }}</text>
				</view>

				<!-- 反馈图片 -->
				<view class="feedback-images" v-if="item.imageUrls">
					<image 
						v-for="(image, index) in getImageList(item.imageUrls)" 
						:key="index"
						:src="image" 
						class="feedback-image" 
						mode="aspectFill"
						@click="previewImage(getImageList(item.imageUrls), index)"
					></image>
				</view>

				<!-- 回复内容 -->
				<view class="feedback-reply" v-if="item.reply">
					<view class="reply-header">
						<u-icon name="chat" size="16" color="#1BBC9B"></u-icon>
						<text class="reply-title">官方回复</text>
					</view>
					<text class="reply-content">{{ item.reply }}</text>
				</view>

				<!-- 反馈时间 -->
				<view class="feedback-time">
					<text class="time-text">{{ formatTime(item.createTime) }}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<u-icon name="info-circle" size="80" color="#ccc"></u-icon>
			<text class="empty-text">暂无反馈记录</text>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && feedbackList.length > 0">
			<u-button 
				type="primary" 
				:custom-style="loadMoreStyle"
				@click="loadMore"
				:loading="loading"
			>
				{{ loading ? '加载中...' : '加载更多' }}
			</u-button>
		</view>
	</view>
</template>

<script>
	import { get } from "@/utils/request";
	
	export default {
		data() {
			return {
				feedbackList: [],
				pageNum: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,
				loadMoreStyle: {
					backgroundColor: '#1BBC9B',
					color: '#fff',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					height: '70rpx',
					lineHeight: '70rpx'
				}
			}
		},
		onLoad() {
			this.loadFeedbackList();
		},
		methods: {
			// 加载反馈列表
			async loadFeedbackList() {
				try {
					const membersId = uni.getStorageSync("userId");
					if (!membersId) {
						uni.showToast({
							title: '用户未登录',
							icon: 'none'
						});
						return;
					}

					this.loading = true;
					const res = await get('/transaction/YZMfeedback/list', {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						membersId: membersId
					});

					if (res.code === 200) {
						if (this.pageNum === 1) {
							this.feedbackList = res.rows || [];
						} else {
							this.feedbackList = [...this.feedbackList, ...(res.rows || [])];
						}
						
						this.hasMore = this.feedbackList.length < res.total;
					}
				} catch (error) {
					console.error('加载反馈列表失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},

			// 加载更多
			loadMore() {
				if (!this.hasMore || this.loading) return;
				this.pageNum++;
				this.loadFeedbackList();
			},

			// 获取反馈类型文本
			getFeedbackTypeText(type) {
				const typeMap = {
					0: '商品相关',
					1: '订单支付',
					2: '账户积分',
					3: '优惠活动',
					4: '产品建议',
					5: '其他'
				};
				return typeMap[type] || '其他';
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: '待处理',
					1: '处理中',
					2: '已回复',
					3: '已关闭'
				};
				return statusMap[status] || '未知';
			},

			// 获取状态样式类
			getStatusClass(status) {
				const classMap = {
					0: 'status-pending',
					1: 'status-processing',
					2: 'status-replied',
					3: 'status-closed'
				};
				return classMap[status] || 'status-pending';
			},

			// 获取图片列表
			getImageList(imageUrls) {
				if (!imageUrls) return [];
				return imageUrls.split(',').filter(url => url.trim());
			},

			// 预览图片
			previewImage(images, current) {
				uni.previewImage({
					urls: images,
					current: images[current]
				});
			},

			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const now = new Date();
				const diff = now - date;
				
				// 小于1分钟
				if (diff < 60000) {
					return '刚刚';
				}
				// 小于1小时
				if (diff < 3600000) {
					return Math.floor(diff / 60000) + '分钟前';
				}
				// 小于24小时
				if (diff < 86400000) {
					return Math.floor(diff / 3600000) + '小时前';
				}
				// 小于30天
				if (diff < 2592000000) {
					return Math.floor(diff / 86400000) + '天前';
				}
				
				// 超过30天显示具体日期
				return date.getFullYear() + '-' + 
					   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
					   String(date.getDate()).padStart(2, '0');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.header {
		background-color: #fff;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #eee;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.feedback-list {
		padding: 20rpx;
	}

	.feedback-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.feedback-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.feedback-type {
			.type-text {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.feedback-status {
			padding: 6rpx 16rpx;
			border-radius: 20rpx;
			font-size: 24rpx;

			&.status-pending {
				background-color: #fff3cd;
				color: #856404;
			}

			&.status-processing {
				background-color: #d1ecf1;
				color: #0c5460;
			}

			&.status-replied {
				background-color: #d4edda;
				color: #155724;
			}

			&.status-closed {
				background-color: #f8d7da;
				color: #721c24;
			}
		}
	}

	.feedback-content {
		margin-bottom: 20rpx;

		.description {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
		}
	}

	.feedback-images {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-bottom: 20rpx;

		.feedback-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			border: 1rpx solid #eee;
		}
	}

	.feedback-reply {
		background-color: #f8f9fa;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.reply-header {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.reply-title {
				font-size: 26rpx;
				color: #1BBC9B;
				font-weight: bold;
				margin-left: 8rpx;
			}
		}

		.reply-content {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
		}
	}

	.feedback-time {
		.time-text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;

		.empty-text {
			font-size: 28rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.load-more {
		padding: 20rpx 40rpx;
	}
</style> 